<template>
    <div class="main">
        <PageTitle title="后台首页"></PageTitle>
            <DatePicker @dateChange="dateChange" />
            <div class="cont" v-if="user_state!=4">
                <div class="item">
                    <i class="el-icon-coin"></i>
                    <div class="price">{{income}}</div>
                    {{start?'营业额':'今日营业额'}}
                </div>
                <div class="item">
                    <i class="el-icon-s-order"></i>
                    <div class="price">{{meter_order}}</div>
                    盲盒订单数
                </div>
                <div class="item">
                    <i class="el-icon-truck"></i>
                    <div class="price">{{record}}</div>
                    待发货订单数(包邮)
                </div>
                <div class="item">
                    <i class="el-icon-truck"></i>
                    <div class="price">{{free}}</div>
                    待发货订单数(不包邮)
                </div>
            </div>
            <div class="cont" v-if="user_state == 4">
                <div class="item">
                    <i class="el-icon-coin"></i>
                    <div class="price">{{meter_day}}</div>
                    今日引流人数
                </div>
                <div class="item">
                    <i class="el-icon-s-order"></i>
                    <div class="price">{{meter_order}}</div>
                    盲盒订单数
                </div>
                <div class="item">
                    <i class="el-icon-truck"></i>
                    <div class="price">{{postage}}</div>
                    充值订单数
                </div>
                <div class="item">
                    <i class="el-icon-truck"></i>
                    <div class="price">{{recharge}}</div>
                    邮费订单数
                </div>
            </div>
        <el-row :gutter="20">
            <!-- <el-col :span="12">
                <div class="charts">
                    <div class="title">总收入</div>
                    <ve-line :data="chartData"></ve-line>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="charts">
                    <div class="title">订单数量</div>
                    <ve-histogram :data="chartData"></ve-histogram>
                </div>
            </el-col> -->
        </el-row>
    </div>
</template>
<script>
import DatePicker from '@/components/datePicker/DatePicker.vue'
import PageTitle from '@/components/pageTitle/PageTitle.vue'
export default {
    components:{
      	DatePicker,
      	PageTitle
    },
    data(){
        return{
            chartData: {
                columns: ['日期', '访问用户', '下单用户'],
                rows: [
                    { '日期': '1/1', '访问用户': 1393, '下单用户': 1093 },
                    { '日期': '1/2', '访问用户': 3530, '下单用户': 3230 },
                    { '日期': '1/3', '访问用户': 2923, '下单用户': 2623 },
                    { '日期': '1/4', '访问用户': 1723, '下单用户': 1423 },
                    { '日期': '1/5', '访问用户': 3792, '下单用户': 3492 },
                    { '日期': '1/6', '访问用户': 4593, '下单用户': 4293 }
                ]
            },
            user_state: localStorage.getItem("user_state"),
            start:null,
            end:null,
            meter_day:0,//今日用户
            income:0,//今日营业额
            meter_order:0,//盲盒订单数
            recharge:0,//邮费订单
            postage:0,//充值订单
            record:0,//包邮数量
            free:0,//不包邮
            
        }
    },
    activated(){
        this.meterDay()
        this.getIncome()
        this.meterOrder()
        this.rechargeOrder()
        this.postageOrder()
        this.recordNum()
        this.freeNum()
    },
    created(){

    },
    methods:{
      	dateChange(date){
            console.log('选择日期------------',date)
            this.start = date[0]
            this.end = date[1]
            this.meterDay()
            this.getIncome()
            this.meterOrder()
            this.rechargeOrder()
            this.postageOrder()
            this.recordNum()
            this.freeNum()
        },
        //不包邮数量
        async freeNum(){
			let {data:{code,data}} = await this.$axios({
				url:this.$api + "/v1/channel/free",
				methods:"GET",
				params:{
                    start_time:this.start,
                    end_time:this.end
                }
			})
			console.log('不包邮数量--------',data)
			if (code == 0) {
				this.free = data
			}
		},
        //包邮数量
        async recordNum(){
			let {data:{code,data}} = await this.$axios({
				url:this.$api + "/v1/channel/record",
				methods:"GET",
				params:{
                    start_time:this.start,
                    end_time:this.end
                }
			})
			console.log('包邮数量--------',data)
			if (code == 0) {
				this.record = data
			}
		},
        //充值订单
        async postageOrder(){
			let {data:{code,data}} = await this.$axios({
				url:this.$api + "/v1/meter/postage",
				methods:"GET",
				params:{
                    start_time:this.start,
                    end_time:this.end
                }
			})
			console.log('充值订单--------',data)
			if (code == 0) {
				this.postage = data
			}
		},
        //邮费订单
        async rechargeOrder(){
			let {data:{code,data}} = await this.$axios({
				url:this.$api + "/v1/meter/recharge",
				methods:"GET",
				params:{
                    start_time:this.start,
                    end_time:this.end
                }
			})
			console.log('邮费订单--------',data)
			if (code == 0) {
				this.recharge = data
			}
		},
        //盲盒订单数
        async meterOrder(){
			let {data:{code,data}} = await this.$axios({
				url:this.$api + "/v1/meter/order",
				methods:"GET",
				params:{
                    start_time:this.start,
                    end_time:this.end
                }
			})
			console.log('盲盒订单数--------',data)
			if (code == 0) {
				this.meter_order = data
			}
		},
        //今日收入
		async getIncome(){
			let {data:{code,data}} = await this.$axios({
				url:this.$api + "/v1/account/day",
				methods:"GET",
				params:{
                    start_time:this.start,
                    end_time:this.end
                }
			})
			console.log('今日收入--------',data)
			if (code == 0) {
				this.income = data
			}
		},
        //今日用户
        async meterDay(){
            let {data:{code,data}} = await this.$axios({
                url: this.$api + '/v1/meter/day',
                method: 'GET',
                params: {
                    start_time:this.start,
                    end_time:this.end
                }
            })
            console.log('今日用户--------',data)
            if (code == 0) {
                this.meter_day = data
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .cont{
        display: flex;
        justify-content: space-between;
        padding: 30px 0;
    }
    .item{
        padding: 40px 20px; 
        text-align: center;
        color: #fff;
        background-color: rgb(84, 153, 231);
        width: 24.5%;
        box-sizing: border-box;
    }
    .item:nth-child(2){
        background-color: rgb(95, 240, 191);
    }
    .item:nth-child(3){
        background-color: rgb(150, 76, 150);
    }
    .item:nth-child(4){
        background-color: rgb(80, 136, 240);
    }
    .item .price{
        font-size: 20px;
        line-height: 40px;
    }
    .item i{
        font-size: 60px;
    }
    .charts{
        box-shadow: 0 0 5px rgba(0,0,0,0.3);
        padding: 10px;
    }
    .charts .title{
        font-size: 18px;
        text-align: center;
        padding: 20px 0;
    }
</style>